﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dbPoll_Application.ViewModels.PollReportViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	SessionParticipationGraphical
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <div class="pageHeadingContainer"><h2 class="pageHeading">Poll Reports</h2></div>
    <div id="contentContainer">
        <p><%= Html.ActionLink("Polls > ", "Index", "Poll", null, new { @class = "breadcrumb" })%><%= Model.name %></p>
        <div id="pageMenuContainer">
            <span id="launchScreen"><%= Html.ActionLink("Go back to reports", "Reports", new { pollID = Model.pollID })%></span>
            <ul id="pageMenu">
                <li><%= Html.ActionLink("Details", "Questions", new { pollID = Model.pollID }) %></li>
                <li><%= Html.ActionLink("Run", "SetSession", new { pollID = Model.pollID }) %></li>
                <li><%= Html.ActionLink("Test", "Test", new { pollID = Model.pollID }) %></li>
                <li>Reports</li>
                <li><%= Html.ActionLink("Manage Hierarchy", "EntityHierarchy", new { pollID = Model.pollID })%></li>
            </ul>
        </div>
        <div id="pageSubMenuContainer">
            <ul id="pageMenu">
                <li><a href="#" onclick="chartType('BarChart');">Horizontal Bar</a></li>
                <li><a href="#" onclick="chartType('ColumnChart')">Vertical Bar</a></li>
                <li><a href="#" onclick="chartType('PieChart');">Pie</a></li>
            </ul>
        </div>
        <input type="hidden" id="chartType" value="PieChart" />
        <% using (Html.BeginForm("SessionGraphical","Poll",FormMethod.Post)) { %>
            <input type="hidden" id="urls" name="urls" />
            <input type="hidden" id="name" name="type" value="Session Participation Report" />
            <input type="hidden" id="way" name="way" value="No. of Questions Answered" />
    <input type="hidden" name="PollID" value="<%=Model.pollID %>" />
    <input type="submit" value="Generate PDF" /><%} %>
    Type of Value: <input type="radio" name="sort" id="points" value="points" onclick="chartType($('#chartType').val())"/>Points
    <input type="radio" name="sort" id="attendance" value="attendance" checked=checked onclick="chartType($('#chartType').val())"/>Attendance
        </div>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    function chartType(type) {
        drawChart(type);
        drawthing(type);
        $('#chartType').val(type);
    }
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
      
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart(type) {
          if (document.getElementById('points').checked) var sort = document.getElementById('points').value;
          else var sort = document.getElementById('attendance').value;
          if (sort=='attendance') document.getElementById('way').value="No. of Questions Answered";
          else document.getElementById('way').value="Points Accumulated";
          // Create the data table.
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Topping');
          data.addColumn('number', 'Questions Answered');
          <%var count=0;%>
          if (sort == "attendance") {
              data.addRows([
                <% 
                foreach (var participant in Model.participants){ 
                    if (count==0) {%>
                ['<%=participant.firstName%> <%=participant.lastName%>', <%=Model.participating(participant)%>]<%count++;}else
                {%>,['<%=participant.firstName%> <%=participant.lastName%>', <%=Model.participating(participant)%>]<%}} %>
              ]);
          }
          else {
            data.addRows([
                <%count=0;
                foreach (var participant in Model.participants){ 
                    if (count==0) {%>
                ['<%=participant.firstName%> <%=participant.lastName%>', <%=Model.onlypoints(participant)%>]<%count++;}else
                {%>,['<%=participant.firstName%> <%=participant.lastName%>', <%=Model.onlypoints(participant)%>]<%}} %>
              ]);
          }
          // Set chart options
          var options = {'title':'Participation in '+'<%=Model.name %>',
                         'width':800,
                         'height':700
                         };

          // Instantiate and draw our chart, passing in some options.
          if (type=='ColumnChart' && sort=="points") {
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            options["hAxis"]={ title: "Name of Participant" };
            options["vAxis"]={ title: "Points Accumulated", maxValue: '<%=Model.onlytotal() %>'};
          }
          else if (type=='ColumnChart' && sort=="attendance") {
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            options["hAxis"]={ title: "Name of Participant" };
            options["vAxis"]={ title: "No. of Questions Answered", maxValue: '<%=Model.poll.questions.Count()%>'};
          }
          else if (type=='BarChart' && sort=="points") {
            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            options["vAxis"]={ title: "Name of Participant" };
            options["hAxis"]={ title: "Points Accumulated", maxValue: '<%=Model.onlytotal() %>'};
          }
          else if (type=='BarChart' && sort=="attendance") {
            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            options["vAxis"]={ title: "Name of Participant" };
            options["hAxis"]={ title: "No. of Questions Answered", maxValue: '<%=Model.poll.questions.Count()%>'};
          }
          else var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
          chart.draw(data, options);
    }
    </script>
    <script type='text/javascript'>
        google.load("visualization", "1.0", { packages: ["imagechart"] });
    </script>
    <script type='text/javascript'>
    google.setOnLoadCallback(drawthing);
    function drawthing(type) {
        if (document.getElementById('points').checked) {var sort = document.getElementById('points').value;}
        else {var sort = document.getElementById('attendance').value;}
        if (type=="ColumnChart") {type="bvg";}
        else if (type=="BarChart") {type="bhs";}
        else {type="p";}
        var url;
        var names="";
        var chd="t:";
        <%var b = 1+((Model.participants.Count-1)/28);
          for (int a=1; a<=b; a++) 
          {%>
                var names<%=a%> ="";
                var chd<%=a%>="";
              <%foreach (var participant in Model.participants.Skip((a-1)*28).Take(28))
                {%>
                    if (type=="bhs") {names<%=a%> = '<%=participant.firstName%> <%=participant.lastName%>|'+names<%=a%>;}
                    else {names<%=a%> += '<%=participant.firstName%> <%=participant.lastName%>|';}
                    if (sort == "attendance") { chd<%=a%> += "<%=Model.participating(participant)%>%2C";}
                    else { chd<%=a%> += "<%=Model.onlypoints(participant)%>%2C";}
              <%}%>
                names<%=a%> = names<%=a%>.slice(0,names<%=a%>.length-1);
                chd<%=a%> = chd<%=a%>.slice(0,chd<%=a%>.length-3);
        <%}%>
        var chco = "chco=0000A0|77BFC7|B3BCC0|FF0000|00FFFF|0000FF|";
            chco += "ADA96E|E238EC|FF0080|800080|FFFF00|00FF00|FFA500|A52A2A|E56717|800000|008000|";
            chco += "808000|FF00FF|4C7D7E|151B54|B7CEEC|342D7E|153E7E|9E7BFF|F6358A|893BFF|E67451|F778A1|";
            chco += "C6AEC7|348781|4E9258|52D017|A0C544|E45E9D|C8B560";
        if (type=="p") {
            url = "//chart.googleapis.com/chart?cht=p&chs=485x280&";
            <%for (int a=1; a<=b; a++) {%> names += names<%=a%> + "|"; chd += chd<%=a%> + "%2C"; <%}%>
            names = names.slice(0,names.length-1);
            chd = chd.slice(0,chd.length-3);
            url += "chl=" + names + "&chdlp=r&" +chco;
            url += "&chd=" + chd;
            document.getElementById("urls").value=url;
        }     
        if (type=="bhs") {
            var value="";
            <%for (int a=1; a<=b; a++) {%>
                var fullurl = "//chart.googleapis.com/chart?cht=bhs&chs=485x542&chxt=y%2Cx&";
                fullurl += "chxl=0:|" + names<%=a%> + "&chdlp=r&chco=3399CC&";
                fullurl += "chxr=1%2C0%2C";
                var chds="&chds=0%2C";
                if (sort=="attendance") {fullurl += "<%=Model.poll.questions.Count()%>"; chds += "<%=Model.poll.questions.Count()%>";}
                else {fullurl += "<%=Model.onlytotal()%>"; chds += "<%=Model.onlytotal()%>";} 
                fullurl += "&chbh=r%2C0.5%2C1.5&" + "chd=" + chd + chd<%=a%> + chds;
                value += fullurl +",";
            <%}%>
            document.getElementById("urls").value = value.slice(0,value.length-1);
        }
        if (type=="bvg") {
            var value="";
            <%for (int a=1; a<=b; a++) {%>
                if (sort=="attendance") {
                    var chds = "<%=Model.poll.questions.Count()%>";
                }
                else { var chds = "<%=Model.onlytotal()%>";}
                chco = chco.replace(/\|/g, "%2C");
                var fullurl = "//chart.googleapis.com/chart?cht=bvg&chs=485x542&chxt=x%2Cy&";
                fullurl += "chxr=1%2C0%2C" +chds +"&chds=0%2C" + chds + "&chxl=0:|Participant&chdlp=r&";
                fullurl += "chdl=" + names<%=a%> + "&"+chco+"&";
                fullurl += "chbh=r%2C0.5%2C1.5&";
                chd<%=a%> = chd<%=a%>.replace(/%2C/g, "|"); 
                fullurl += "chd=t:" + chd<%=a%>;
                value += fullurl +",";
            <%}%>
            document.getElementById("urls").value = value.slice(0,value.length-1);
        }      
    }
    </script>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="Image_div" style="height:0;width:0;visibility:hidden"></div>
    <div id="chart_div" align="center"></div>    
  </body>
</asp:Content>
